<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0 Access-Control-Allow-Origin">
      <!-- 引入 Bootstrap -->
      <!--<link href="<?=base_url('html/bootstrap_v3/css/bootstrap.css')?>" rel="stylesheet">-->
      <link href="<?=  base_url('/html/bootstrap_v3/css/bootstrap.css')?>" rel="stylesheet">
      <link href="<?=base_url('html/bootstrap_v3/datepicker/css/bootstrap-datetimepicker.min.css')?>" rel="stylesheet">
      <script src="<?=base_url('html/js/jquery-1.8.3.min.js')?>"></script>
      <script src="<?=base_url('html/bootstrap_v3/js/bootstrap.min.js')?>"></script>
      <script src="<?=base_url('html/bootstrap_v3/datepicker/js/bootstrap-datetimepicker.js')?>"></script>
      <script src="<?=base_url('html/bootstrap_v3/datepicker/js/locales/bootstrap-datetimepicker.zh-CN.js')?>"></script>
      <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
        <script>
          /*
           * 注意：
           * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
           * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
           * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
           *
           * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
           * 邮箱地址：weixin-open@qq.com
           * 邮件主题：【微信JS-SDK反馈】具体问题
           * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
           */
          wx.config({
            debug: false,
            appId: '<?=$appId;?>',
            timestamp: <?=$timestamp;?>,
            nonceStr: '<?=$nonceStr;?>',
            signature: '<?=$signature;?>',
            jsApiList: [
              // 所有要调用的 API 都要加到这个列表中
              'scanQRCode',
              'chooseImage',
              'previewImage',
              'uploadImage',
              'downloadImage',
            ]
          });
          wx.ready(function () {
            // 在这里调用 API
            document.querySelector('#test').onclick = function () {
                wx.scanQRCode({
                  needResult: 1,
                  desc: 'scanQRCode desc',
                  success: function (res) {
                    //alert(JSON.stringify(res));
                    var result = res.resultStr;
                    alert(result);
                  }
                });
            };
            var images = {
                localId: [],
                serverId: []
            };
            document.querySelector('#choose').onclick = function(){
                wx.chooseImage({
                    success: function (res) {
                        /*
                        if(res.localIds.length > 1){ 
                            alert("只能选择一张图片",null); 
                            return; 
                        }
                        */
                        images.localId = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        alert('已选择 ' + res.localIds.length + ' 张图片');
                        
                        if (images.localId.length == 0) {
                          alert('请先选择要上传的图片');
                          return;
                        }
                        var i = 0, length = images.localId.length;
                        images.serverId = [];
                        function upload() {
                          wx.uploadImage({
                            localId: images.localId[i],
                            success: function (res) {
                              i++;
                              alert('已上传：' + i + '/' + length);
                              images.serverId.push(res.serverId);
                              $.ajax({
                                  type:"GET",
                                            isShowProgressTips: 1, // 默认为1，显示进度提示
                                            url:"<?=base_url()?>/createFile/downloadfile?mediaid="+res.serverId,
                                  success:function(data){
                                      var html = "<img src='<?=base_url()?>/"+data+"' width='320px'>"
									  //alert(html);
                                      $("#showimg").append(html);
                                  },
                                  error:function(msg){
                                      
                                  }
                              })
                              if (i < length) {
                                upload();
                              }
                              if(i==length){
                                  //alert(images.serverId);
                              }
                            },
                            fail: function (res) {
                              alert(JSON.stringify(res));
                            }
                          });
                        }
                        upload();
                    }
                });
            }
            
            
            
            
            
            /*
            document.querySelector('#upload').onclick = function(){
                wx.uploadImage({
                    localId: localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1// 默认为1，显示进度提示
                    success: function (res) {
                        //var serverId = res.serverId; // 返回图片的服务器端ID
                    }
                });
            }
            document.querySelector('#preview').onclick = function(){
                wx.previewImage({
                    current: '', // 当前显示图片的http链接
                    urls: [] // 需要预览的图片http链接列表
                });
            }
            document.querySelector('#upload').onclick = function(){
                wx.uploadImage({
                    localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1// 默认为1，显示进度提示
                    success: function (res) {
                        var serverId = res.serverId; // 返回图片的服务器端ID
                    }
                });
            }
            document.querySelector('#download').onclick = function(){
                wx.downloadImage({
                    serverId: '', // 需要下载的图片的服务器端ID，由uploadImage接口获得
                    isShowProgressTips: 1// 默认为1，显示进度提示
                    success: function (res) {
                        var localId = res.localId; // 返回图片下载后的本地ID
                    }
                });
            }
			*/
          });
        </script>
      
      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
        <p>
            <button id="test" type="button" class="btn btn-primary btn-lg btn-block">
               调用二维码扫描
            </button>
        </p>
        <hr>
        <p>
            <button id="choose" type="button" class="btn btn-primary btn-lg btn-block">
               调用相册或者摄像头上传图片
            </button>
        </p>
        <hr>
        <p>
            <div id="showimg"></div>
        </p>
        <!--
        <hr>
        <p>
            <button id="upload" type="button" class="btn btn-primary btn-lg btn-block">
               上传图片
            </button>
        </p>
        <hr>
        <p>
            <button id="download" type="button" class="btn btn-primary btn-lg btn-block">
               下载图片
            </button>
        </p>
        -->
   </body>
</html>